<template>
	<view class="comment-pop">
		<u-popup mode="bottom" :round="5" :closeOnClickOverlay="true" :show="show" @close="popClose">
			<view class="container">
				<view class="container__head">
					<view class="container__head--left">
						<u-icon name="close" size="20" @click="popClose"></u-icon>
					</view>
					<view class="container__head--center" v-if="towerOwner.ReplyCount"><text style="margin-right: 10rpx;">{{towerOwner.ReplyFloor}}</text>楼评论</view>
					<view class="container__head--center" v-else>内容已被删除</view>
					<view class="container__head--right">
						<image src="@/static/theme/default/home/more.png" mode="" v-show="towerOwner.CreateUser == obsusername" @click="beforeOwnerDel"></image>
					</view>
				</view>
				<view class="container__body" 
					 id="comment-pop__body"
					:scroll-y="isScroll"
					:currentComment="currentComment"
					:userComment="userComment"
					:change:currentComment="commentPopjs.currentCommentChange"
					:change:userComment="commentPopjs.userCommentChange"
					>
					<z-paging ref="paging" class="z-paging" :fixed="false" height="100%" :refresher-enabled="false" v-model="userComment" @query="queryList">
						<view class="comment-card" style="border-bottom: 1rpx solid #eee;" v-if="towerOwner.CreateUser">
							<view class="comment-card__left">
								<view class="comment-card__left--avator" @click="goHomePage(towerOwner)">
									<avator :avator="towerOwner.avator" :name="towerOwner.CreateUser"></avator>
								</view>
							</view>
							<view class="comment-card__right" style="border-bottom: 0 solid #eee;">
								<view class="comment-card__right--name">
									<text @click="goHomePage(towerOwner)">{{towerOwner.CreateUser}}</text>
								</view>
								<view class="comment-card__right--time">
									<text @click="goHomePage(towerOwner)">{{towerOwner.CreateTime}}</text>
								</view>
								<view class="comment-card__right--content" style="padding-top: 20rpx;" v-html="towerOwner.content"></view>
								<view class="comment-card__right--bottom">
									<view class="comment-card__right--bottom__left" style="color: #5797cc;" @click="goPage">查看原帖</view>
									<view class="comment-card__right--bottom__right" style="justify-content: flex-end;margin-right: 45rpx;">
										<view class="comment-card__right--bottom__right--item" @click="commentLike(towerOwner)">
											<image src="@/static/theme/default/home/comment/dianzhan.png" mode="" v-if="!towerOwner.isCommentLike"></image>
											<image :class="['animated',(towerOwner.isCommentLike ? 'jackInTheBox' : '')]" src="@/static/theme/default/home/comment/dianzhan_active.png" mode="" v-else></image>
											<view class="" :style="{color: towerOwner.isCommentLike ? '#e16531' : ''}">{{setLikeNum(towerOwner)}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="more" v-show="isOne" @click="showMore">查看全部评论</view>
						<view class="">
							<view class="comment-card" v-for="item in userComment" :key="item.Id">
								<view class="comment-card__set" @click="clickSet(item)">
									<image src="@/static/theme/default/home/more.png" mode=""></image>
								</view>
								<view class="comment-card__left">
									<view class="comment-card__left--avator" @click="goHomePage(item)">
										<avator :avator="item.avator" :name="item.CreateUser"></avator>
									</view>
								</view>
								<view class="comment-card__right">
									<view class="comment-card__right--name">
										<text @click="goHomePage(item)">{{item.CreateUser}}</text>
									</view>
									<view class="comment-card__right--content">
										<text v-show="item.ReceiveUser" style="font-size: 37rpx;">
											<text style="margin-right: 10rpx;color: #aaa;">回复</text>
											<text style="color: #5797cc;">{{item.ReceiveUser}}</text>
											<text>：</text>
										</text>
										<text :id="'pop-content-' + item.Id" v-html="item.content"></text>
									</view>
									<view class="comment-card__right--bottom">
										<view class="comment-card__right--bottom__left">{{item.CreateTime}}</view>
										<view class="comment-card__right--bottom__right">
											<view class="comment-card__right--bottom__right--item" @click="commentOther(item)">
												<image src="@/static/theme/default/home/comment/comment.png" mode=""></image>
												<view class="">回复</view>
											</view>
											<view class="comment-card__right--bottom__right--item" @click="commentLike(item)">
												<image src="@/static/theme/default/home/comment/dianzhan.png" mode="" v-if="!item.isCommentLike"></image>
												<image :class="['animated',(item.isCommentLike ? 'jackInTheBox' : '')]" src="@/static/theme/default/home/comment/dianzhan_active.png" mode="" v-else></image>
												<view class="" :style="{color: item.isCommentLike ? '#e16531' : ''}">{{setLikeNum(item)}}</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</z-paging>
				</view>
				<view class="container__input" v-if="towerOwner.ReplyCount">
					<view class="container__input-box" @click="commentOwner">
						<text style="margin-right: 20rpx;">回复</text>
						<text>{{towerOwner.CreateUser}}...</text>
					</view>
				</view>
			</view>
		</u-popup>
		
		<pop-box>
			<u-popup mode="bottom" zIndex="11000" :round="20" closeOnClickOverlay :show="setPopVisible" @close="setPopVisible = false" @open="setPopVisible = true">
				<view class="set-pop">
					<view class="set-pop__head">管理</view>
					<view class="set-pop__body">
						<view class="set-pop__item" @click="delComment">
							<view class="set-pop__item--icon">
								<image src="@/static/theme/default/home/comment/shanchu.png" mode=""></image>
							</view>
							<view class="set-pop__item--text">删除</view>
						</view>
						<view class="set-pop__item" @click="commentPopjs.comment_copy">
							<view class="set-pop__item--icon">
								<image src="@/static/theme/default/home/comment/copy.png" mode=""></image>
							</view>
							<view class="set-pop__item--text">复制</view>
						</view>
					</view>
					<view class="set-pop__bottom" @click="setPopVisible = false">取消</view>
				</view>
			</u-popup>
		</pop-box>
		
		<comment-nav-bar :show="commentVisible" :title="title" :type="type" :menu="menu" @submit="submit" @close="close"/>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import _data from '@/common/_data.js'
	import Avator from '@/components/custom/avator/avator.vue'
	import {timestampFormat,entitiestoUtf16} from '@/common/custom_util.js'
	import moment from 'moment';
	import CommentNavBar from '@/components/custom/navbar/navbar.vue'
	import PopBox from '@/components/custom/pop-box/index.vue'
	import uniCopy from '@/common/uni-copy.js';
	import emoji_default from '@/static/js/message/emoji_data.js';
	import emoji_jxp from '@/static/js/jxp.js';
	
	export default {
		components: {
			Avator,CommentNavBar,PopBox
		},
		data() {
			return {
				obsusername: _data.localData('name'),
				pxid: _data.localData('userid'),
				static_avator: _data.data('static_url'),
				emojiDic: emoji_default.emoji_dic,
				jxpDic: emoji_jxp.jxp_dic,
				towerOwner: {},//本层楼主
				userComment: [],//其他人回复
				commentVisible: false,
				title: '',
				type: 'comment-pop',
				menu: [],
				currentComment: {},//待删除的评论
				user: {},
				setPopVisible: false,
				isScroll: true,
				currentpage: 1,
				pagesize: 10,
				receive: {},
				isOne: false,//是否显示查看全部评论
			}
		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
			data: {
				type: Object,
				default: () => {}
			},
			//回复人id
			id: {
				type: String,
				default: ''
			}
		},
		watch: {
			show() {
				if(this.show) {
					this.getTopicReplyInfoByFloorId();
					if(this.id) {
						this.isOne = true;
					} else {
						this.isOne = false;
					}
				} else {
					setTimeout(() => {
						this.userComment = [];
						this.towerOwner = {};
						this.pagesize = 10;
						this.currentpage = 1;
					},300)
				}
			},
		},
		methods: {
			/**
			 * 初始化分页参数
			 */
			initPage() {
				this.pagesize = 10;
				this.currentpage = 1;
				this.$refs.paging.reload();
			},
			/**
			 * 分页请求的方法(初始化会执行，相当于写在onload中)
			 * @param {Object} pageNo	当前页码
			 * @param {Object} pageSize		每页数量
			 */
			queryList(pageNo, pageSize) {
				this.pagesize = pageSize;
				this.currentpage = pageNo;
				this.getDataList();
			},
			/**
			 * 关闭弹窗
			 */
			popClose() {
				this.$emit('close')
			},
			/**
			 * 获取本楼楼主回复
			 */
			getTopicReplyInfoByFloorId() {
				let that = this;
				return new Promise((resolve, reject) => {
					_custom.getDataJava({
						apiname: 'getTopicReplyInfoByFloorId',
						apiparam: {
							topicid: this.data.topicid,
							obsusername: this.obsusername,
							obspxid: this.pxid,
							floorid: this.data.floorid
						},
						success(res) {
							if(res.length) {
								res[0].avator = that.static_avator + "/static/photo/user/" + res[0].CreatePxid + "/70.jpg";
								let content = entitiestoUtf16(res[0].ReplyContent);
								content = content.replace(/%22/g,"\"");
								res[0].content = that.replaceEmoji(content);
								res[0].isCommentLike = res[0].MyLikesCount == '1' ? true : false;
								res[0].CreateTime = timestampFormat(res[0].CreateTime);
								that.towerOwner = res[0]
							} else {
								that.towerOwner = {}
							}
						}
					})
				})
			},
			/**
			 * 获取本楼其他回复
			 */
			getTopicReplyListByFloorId() {
				let that = this;
				return new Promise((resolve, reject) => {
					_custom.getDataJava({
						apiname: 'getTopicReplyListByFloorId',
						pagesize: this.pagesize,
						currentpage: this.currentpage,
						apiparam: {
							topicid: this.data.topicid,
							obsusername: this.obsusername,
							obspxid: this.pxid,
							floorid: this.data.floorid
						},
						success(res) {
							resolve(res)
						}
					})
				})
			},
			/**
			 * 根据Id获取单个楼层回复
			 */
			getTopicReplyListById() {
				let that = this;
				return new Promise((resolve, reject) => {
					_custom.getDataJava({
						apiname: 'getTopicReplyListById',
						apiparam: {
							replyid: this.id,
							obsusername: this.obsusername,
							obspxid: this.pxid,
						},
						success(res) {
							if(res.length) {
								res[0].avator = that.static_avator + "/static/photo/user/" + res[0].CreatePxid + "/70.jpg";
								let content = entitiestoUtf16(res[0].ReplyContent);
								content = content.replace(/%22/g,"\"");
								res[0].content = that.replaceEmoji(content);
								res[0].isCommentLike = res[0].MyLikesCount == '1' ? true : false;
								res[0].CreateTime = timestampFormat(res[0].CreateTime);
								that.$refs.paging.complete(res);
							} else {
								that.userComment = [];
							}
						}
					})
				})
			},
			/**
			 * 创建主题点赞
			 */
			addTopicLikes(apiparam) {
				let that = this;
				return new Promise((resolve, reject) => {
					_custom.getDataJava({
						apiname: 'addTopicLikes',
						apiparam: apiparam,
						success(res) {
							resolve(res)
						}
					})
				})
			},
			/**
			 * 创建主题回复
			 */
			addTopicReply(apiparam) {
				let that = this;
				return new Promise((resolve, reject) => {
					_custom.getDataJava({
						apiname: 'addTopicReply',
						apiparam: apiparam,
						success(res) {
							resolve(res)
						}
					})
				})
			},
			/**
			 * 创建主题艾特相关人数据
			 */
			addTopicAt(apiparam) {
				let that = this;
				return new Promise((resolve, reject) => {
					_custom.getDataJava({
						apiname: 'addTopicAt',
						code: 13,
						apiparam: apiparam,
						success(res) {
							resolve(res)
						}
					})
				})
			},
			/**
			 * 删除回复（级联）
			 */
			flagDelTopicReply() {
				let that = this;
				_custom.getDataJava({
					apiname: 'flagDelTopicReply',
					code: 2,
					apiparam: {
						replyid: this.currentComment.Id,
						obsusername: this.obsusername,
						obspxid: this.pxid
					},
					success(res) {
						if(that.isOne) that.showMore();
						that.getTopicReplyInfoByFloorId();
						that.initPage()
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
					}
				})
			},
			/**
			 * 请求数据
			 */
			getDataList() {
				if(this.isOne) {
					this.getTopicReplyListById()
				} else {
					this.getTopicReplyListByFloorId().then(res => {
						this.setDataList(res)
					})
				}
			},
			/**
			 * 处理返回数据
			 */
			setDataList(dataList) {
				let that = this;
				let list = [];
				dataList.forEach(item => {
					item.avator = that.static_avator + "/static/photo/user/" + item.CreatePxid + "/70.jpg";
					let content = entitiestoUtf16(item.ReplyContent);
					content = content.replace(/%22/g,"\"");
					item.content = this.replaceEmoji(content);
					item.isCommentLike = item.MyLikesCount == '1' ? true : false;
					item.CreateTime = timestampFormat(item.CreateTime);
					
					let flag = false;
					that.userComment.forEach(v => {
						if(item.Id == v.Id) {
							flag = true
						}
					})
					if(!flag) list.push(item);
				})
				if(that.currentpage == 1) {//z-paging组件第一页不需要过滤
					that.$refs.paging.complete(dataList);
				} else {
					that.$refs.paging.complete(list);
				}
			},
			clickSet(v) {
				this.currentComment = v;
				this.setPopVisible = true;
			},
			/**
			 * 删除楼主回复
			 */
			beforeOwnerDel() {
				this.currentComment = this.towerOwner;
				this.setPopVisible = true;
			},
			/**
			 * 删除评论
			 */
			delComment(v) {
				let that = this;
				this.setPopVisible = false;
				uni.showModal({
					title: '提示',
					content: '确认要删除该评论吗？',
					confirmText: '删除',
					success(res) {
						if(res.confirm) {
							that.flagDelTopicReply()
						}
					}
				})
			},
			/**
			 * 评论回复
			 * @param {Object} v
			 */
			commentOther(v) {
				this.user = v;
				this.title = '回复' + v.CreateUser;
				this.menu = [0,2];
				this.commentVisible = true;
				this.isScroll = false;
			},
			/**
			 * 评论点赞
			 */
			commentLike(v) {
				this.$set(v,'isCommentLike',!v.isCommentLike);
				let LikesCount = v.LikesCount*1;
				if(v.isCommentLike) {
					LikesCount = ++LikesCount;
				} else {
					LikesCount = --LikesCount;
				}
				let MyLikesCount = v.MyLikesCount == '1' ? '0' : '1';
				this.$set(v,'LikesCount',LikesCount);
				this.$set(v,'MyLikesCount',MyLikesCount);
				this.addTopicLikes({
					topicid: this.towerOwner.TopicId,
					topicrouter: 'week-report-view',
					businessid: this.towerOwner.BusinessId,
					owner: this.towerOwner.CreateUser,
					ownerpxid: this.towerOwner.CreatePxid,
					replyid: v.Id,//点赞别人的留言传留言id
					createuser: this.obsusername,
					createpxid: this.pxid,
					flag: v.isCommentLike ? 0 : 1,
				})
			},
			/**
			 * 设置赞的数量
			 * @param {Object} v
			 */
			setLikeNum(v) {
				if(v.LikesCount != '0') return v.LikesCount
				if(v.LikesCount == '0') return '赞'
			},
			/**
			 * 提交评论
			 * @param {Object} v
			 */
			submit(v) {
				let that = this;
				let text = v.value.text;
				let users = v.value.users;
				let factorys = v.value.factorys;
				let images = v.value.images;
				this.addTopicReply({
					topicid: this.towerOwner.TopicId,
					topicrouter: 'week-report-view',
					businessid: this.towerOwner.BusinessId,
					owner: this.towerOwner.CreateUser,
					ownerpxid: this.towerOwner.CreatePxid,
					replyid: this.user.Id,
					createuser: this.obsusername,
					createpxid: this.pxid,
					replycontent: text,
					replyimages: images.join(',')
				}).then(res => {
					uni.showToast({
						title: '评论成功',
						icon: 'none'
					});
					if(res.length) {
						let replyid = res[0].ReplyId;
						let topicId = res[0].TopicId;
						let id = res[0].ReplyId;
						that.getTopicReplyListByFloorId().then(res => {
							let flag = false;
							res.forEach(item => {
								if(item.Id == id) {
									flag = true;
								}
							})
							if(!flag) {
								++that.currentpage;
								that.getTopicReplyListByFloorId().then(result => {
									let flag2 = false;
									res.forEach(item => {
										if(item.Id == id) {
											flag2 = true;
										}
									})
									if(flag2) that.setDataList(result)
								})
							} else {
								that.setDataList(res)
							}
						})
						console.log(users);
						if(!users.length) return
						let params = [];
						let timestamp = (new Date()).valueOf();
						users.forEach(item => {
							params.push({
								topicid: topicId,
								replyid: replyid,
								batchid: timestamp,
								createuser: this.obsusername,
								createpxid: this.pxid,
								atusername: item.pname,
								atuserpxid: item.pxid,
							})
						})
						factorys.forEach(item => {
							params.push({
								topicid: topicId,
								replyid: replyid,
								batchid: timestamp,
								createuser: this.obsusername,
								createpxid: this.pxid,
								atobscode: item.OBSCODE,
							})
						})
						this.addTopicAt(params)
					}
				})
			},
			/**
			 * 弹窗关闭
			 */
			close() {
				this.commentVisible = false;
				this.isScroll = true;
			},
			/**
			 * 查看原帖
			 */
			goPage() {
				uni.navigateTo({
					url: this.towerOwner.TopicRouter + '?businessId=' + this.towerOwner.BusinessId
				})
			},
			/**
			 * 回复楼主
			 */
			commentOwner() {
				this.user = this.towerOwner;
				this.type = 'owner-comment';
				this.menu = [0,2];
				this.title = '回复' + this.towerOwner.CreateUser;
				this.commentVisible = true;
			},
			/**
			 * 查看全部评论
			 */
			showMore() {
				this.isOne = false;
				this.userComment = [];
				this.getDataList();
			},
			/**
			 * 复制文字
			 * @param {Object} v
			 */
			copy(v) {
				if(!v) {
					uni.showToast({
					  title:'只能复制文字信息',
					  icon:'none'
					}) 
					return
				}
				const result = uniCopy(v)
				  if (result === false) {
					uni.showToast({
					  title:'复制失败',
					  icon:'none'
					})
				  } else {
					uni.showToast({
					  title:'复制文字成功',
					  icon:'none'
					})
				  }
				this.isScroll = true;
				this.setPopVisible = false;
			},
			/**
			 * 跳转到主页
			 * @param {Object} e
			 */
			goHomePage(v) {
				uni.$emit('goCommentHomePage',{
					name: v.CreateUser,
					pxid: v.CreatePxid,
					avator: v.avator,
				});
			},
			/**
			 * 点击艾特
			 */
			clickAt(v) {
				let data = {
					name: v.pname,
					pxid: v.pxid,
				}
				uni.navigateTo({
					url: '/pages/community/homepage?data=' + JSON.stringify(data)
				})
			},
			/**
			 * 预览图片
			 * @param {Object} v
			 */
			preview(v) {
				uni.previewImage({
					urls: v.urls,
					current: v.index
				})
			},
			//替换表情符号为图片
			replaceEmoji(str) {
				let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
					let key = item;
					let defaultValue = this.emojiDic[key] ? this.emojiDic[key].url : '';
					let jxpValue = this.jxpDic[key] ? this.jxpDic[key].url : '';
					let imgstr = '';
					if(defaultValue) {
						// #ifdef H5
						imgstr = '<img class="comment-default pic comment-emoji" style="width:22px;height:22px;" src="' + _data.data('static_url') + '/static/emoji/' + this.emojiDic[key].url + '">';
						// #endif
						// #ifdef APP-PLUS
						let url = plus.io.convertLocalFileSystemURL('_www/static/img/emoji/' + this.emojiDic[key].url);
						imgstr = '<img class="comment-default pic comment-emoji" style="width:22px;height:22px;" src="' + url + '">';
						// #endif
						return imgstr;
					} else if(jxpValue) {
						// #ifdef H5
						imgstr = '<img class="comment-jxp pic comment-emoji" style="width:100px;height:100px;" src="' + _data.data('static_url') + '/static/emoji/jxp/' + this.jxpDic[key].url + '.gif">';
						// #endif
						// #ifdef APP-PLUS
						let url = plus.io.convertLocalFileSystemURL('_www/static/img/jxp/gif/' + this.jxpDic[key].url + '.gif');
						imgstr = '<img class="comment-jxp pic comment-emoji" style="width:100px;height:100px;" src="' + url + '">';
						// #endif
					}
					return imgstr;
				});
				replacedStr = replacedStr.replace(/(\r\n)|(\n)/g, '<br/>');
				return replacedStr;
			},
		}
	}
</script>

<script module="commentPopjs" lang="renderjs">
	import {
		js_image_cache,formatImg
	} from '@/common/custom_util.js';
	import _data from '@/common/_data.js'
	
	export default {
		data() {
			return {
				currentComment: {}
			}
		},
		mounted() {
			
		},
		methods: {
			currentCommentChange(newVal,oldVal,ownerInstance) {
				this.currentComment = newVal;
			},
			comment_copy(event, ownerInstance) {
				let id = "pop-content-" + this.currentComment.Id;
				let box = document.getElementById(id);
				if(box) {
					let text = box.innerText;
					ownerInstance.callMethod('copy',text)
				}
			},
			userCommentChange(newVal,oldVal,ownerInstance) {
				let container = document.getElementById('comment-pop__body');
				if(!container) return
				let imgEles = container.getElementsByClassName("img") || [];
				let box = container.getElementsByClassName("comment-card__right--content")[0] || [];
				let picEles = container.getElementsByClassName("pic") || [];
				let atEles = document.getElementsByClassName("comment-at") || [];
				let imgs = [];
				for (let i = 0; i < imgEles.length; i++) {
					let item = imgEles[i];
					let src = formatImg(item.dataset.key,false)
					imgs.push(src);
				} 
				// // #ifdef APP-PLUS
				// if(picEles.length) {
				// 	for (let i = 0; i < picEles.length; i++) {
				// 		let item = picEles[i];
				// 		if(item.dataset.key) {
				// 			let index = item.dataset.key.indexOf('homepage');
				// 			let name = item.dataset.key.substring(index);
				// 			let extensionIndex = item.dataset.key.lastIndexOf('.');
				// 			let extension = item.dataset.key.substring(extensionIndex);
				// 			if(extension == '.gif') {
				// 				let src = item.dataset.key.replace('_minPic','');
				// 				js_image_cache(src,name,res => {
				// 					item.src = res;
				// 				})
				// 			} else {
				// 				js_image_cache(item.dataset.key,name,res => {
				// 					item.src = res;
				// 				})
				// 			}
				// 			item.dataset.key = '';
				// 		}
				// 	}
				// }
				// // #endif
				// // #ifdef H5
				// for (let i = 0; i < picEles.length; i++) {
				// 	let item = picEles[i];
				// 	if(item.dataset.key) {
				// 		let index = item.dataset.key.lastIndexOf('.');
				// 		let extension = item.dataset.key.substring(index);
				// 		if(extension == '.gif') {
				// 			let src = item.dataset.key.replace('_minPic','');
				// 			item.src = src;
				// 			continue
				// 		}
				// 		item.src = item.dataset.key;
				// 	}
				// }
				// // #endif
				
				if(imgEles.length) {
					for (let i = 0; i < imgEles.length; i++) {
						let item = imgEles[i];
						item.src = formatImg(item.dataset.key,false);
						item.onload = function() {
							item.setAttribute('style', 'opacity: 1;');
						}
						item.onerror = function(e) {
							let url = '';
							// #ifdef APP-PLUS
							url = plus.io.convertLocalFileSystemURL('_www/static/img/load_err.png');
							// #endif
							// #ifdef H5
							url = '/static/img/load_err.png';
							// #endif
							this.onerror = null;
							this.src = url;
						}
						
						let w = '';
						let h = '';
						if(box.clientWidth < item.width) {
							w = box.clientWidth;
							h = item.height / item.width * box.clientWidth;
						} else {
							w = item.width;
							h = item.height;
						}
						item.width = w;
						item.height = h;
						if(imgs.length) {
							item.addEventListener('click',() => {
								ownerInstance.callMethod('preview',{
									urls: imgs,
									index: i
								})
							})
						}
					}
				}
				
				if(atEles.length) {
					for (let i = 0; i < atEles.length; i++) {
						let item = atEles[i];
						let user = JSON.parse(item.dataset.user);
						if(item.popAt) {
							item.removeEventListener('click',item.popAt);
						}
						item.popAt = () => {
							ownerInstance.callMethod('clickAt',user)
						}
						item.addEventListener('click',item.popAt);
					}
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		height: 90vh;
		position: relative;
		padding-top: 100rpx;
		box-sizing: border-box;
		padding-bottom: 100rpx;
		
		&__head {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #eee;
			
			&--center{
				font-size: 33rpx;
				font-weight: bold;
			}
			
			&--right {
				width: 50rpx;
				height: 50rpx;
				
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		
		&__body {
			height: calc(100%);
			overflow-y: scroll;
		}
		
		&__input {
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 999999;
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #eee;
			
			&-box {
				margin: 0 20rpx;
				width: 100%;
				height: 60rpx;
				background-color: #fff;
				border-radius: 10rpx;
				padding-left: 20rpx;
				box-sizing: border-box;
				color: #aaa;
				line-height: 60rpx;
			}
		}
	}
	
	.comment-card {
		display: flex;
		padding-top: 20rpx;
		position: relative;
		max-width: 100%;
		overflow: hidden;
		user-select: text;
		word-break: break-all;
		
		&__set {
			position: absolute;
			right: 40rpx;
			top: 20rpx;
			width: 30rpx;
			height: 30rpx;
			
			image {
				width: 100%;
				height: 100%;
			}
		}
		
		&__left {
			width: 100rpx;
			
			&--avator {
				width: 70rpx;
				height: 70rpx;
				margin: 0 20rpx;
			}
		}
		
		&__right {
			width: calc(100% - 120rpx);
			border-bottom: 1rpx solid #eee;
			padding-bottom: 20rpx;
			margin-right: 20rpx;
			
			&--name {
				font-size: 26rpx;
				color: #888888;
			}
			
			&--time {
				font-size: 25rpx;
				color: #aaa;
			}
			
			&--content {
				padding: 20rpx 0;
				padding-top: 40rpx;
				max-width: 100%;
				overflow: hidden;
				font-size: 37rpx;
			}
			
			&--bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				&__left {
					font-size: 25rpx;
					color: #aaa;
				}
				
				&__right {
					display: flex;
					justify-content: space-around;
					width: 250rpx;
					margin-right: 20rpx;
					
					&--item {
						display: flex;
						align-items: center;
						
						image {
							width: 30rpx;
							height: 30rpx;
							margin-right: 10rpx;
						}
						view {
							font-size: 25rpx;
							color: #aaa;
						}
					}
				}
			}
		}
	}
	
	.set-pop {
		
		&__head {
			height: 100rpx;
			font-size: 30rpx;
			font-weight: bold;
			padding-left: 20rpx;
			box-sizing: border-box;
			line-height: 100rpx;
			background-color: #fff;
		}
		
		&__body {
			padding: 20rpx;
			box-sizing: border-box;
			background-color: #fff;
			display: flex;
		}
		
		&__bottom {
			height: 100rpx;
			background-color: #eee;
			font-size: 30rpx;
			font-weight: bold;
			text-align: center;
			line-height: 100rpx;
		}
		
		&__bottom:hover {
			color: #aaa;
		}
	}
	
	.set-pop__item {
		width: 100rpx;
		height: 130rpx;
		margin-right: 20rpx;
		
		&--icon {
			width: 80rpx;
			height: 80rpx;
			margin: 0 10rpx;
			border-radius: 50%;
			background-color: #eee;
			text-align: center;
			line-height: 100rpx;
			
			image {
				width: 50%;
				height: 50%;
			}
		}
		
		&--text {
			font-size: 25rpx;
			color: #aaa;
			margin-top: 10rpx;
			text-align: center;
		}
	}
	
	.more {
		font-size: 33rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		color: deepskyblue;
		border-bottom: 1rpx solid #eee;
		
		&:hover {
			color: #aaa;
		}
	}
	
	.comment-pop /deep/ .u-transition {
		z-index: 10080 !important;
	}
</style>